<template>
    <div class="menuIndex" :style="{width: sideBarItemWidth + 'px'}">
        <el-button class="btnright_r" size="mini" type="text" @click="handleClickMe">
            <img class="bgimg" v-if="sideBarCollapse" src="@/assets/img/khindex/menu_left.png" alt />
            <img class="bgimg" v-else src="@/assets/img/khindex/menu_right.png" alt />
        </el-button>
        <el-scrollbar
            class="menuIndex_scrollbar"
            wrap-class="side-bar-scrollbar-wrap"
            view-class="side-bar-scrollbar-view"
        >
            <!--   mode="horizontal" -->
            <!--   menu-trigger="click" -->
            <!-- <div  @mouseleave.self="handleLeave"  @mouseover.self ="handleOver"> -->
            <!-- menu-trigger="click"  :unique-opened="true" -->
            <el-menu
                :collapse-transition="false"
                :show-timeout="200"
                :collapse="sideBarCollapse"
                :default-active="$route.path"
                class="menuUl"
                :router="false"
                :unique-opened="true"
            >
                <menu-item
                    v-for="item in menuList"
                    :key="item.id+'_'+item.category"
                    :item="item"
                    :isCollapseoff="sideBarCollapse"
                ></menu-item>
                <!-- <side-bar-item v-for="router in menuList" :key="router.id" :item="router"></side-bar-item> -->
            </el-menu>
            <!-- </div> -->
        </el-scrollbar>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
// import SideBarItem from './SideBarItem.vue';
// import SideBarItem from './SideBarItem.vue';
import MenuItem from './MenuItem.vue';

import { HEAD_MENU_WIDTH, HEAD_MENU_UNFOLD_WIDTH } from 'utils/Contants';
export default {
    name: 'MenuIndex',
    components: { MenuItem },
    props: {
        // 菜单展开时的宽度
        width: {
            type: Number,
            default: HEAD_MENU_UNFOLD_WIDTH,
        },
        // 菜单收缩时的宽度
        collapseWidth: {
            type: Number,
            default: HEAD_MENU_WIDTH,
        },
        // 从外部接收的菜单数据
        menuList: {
            type: Array,
            required: true
        },
        // mode: 'horizontal'
    },
    data() {
        return {
            muenLeftIndex: [],
            isCutMenu: '',
            // isCollapse: true,

        }
    },
    computed: {
        ...mapGetters([
            'sideBar',
            'sideBarCollapse',
            'visitedViews',  // 缓存的小tabs
            'sideBarItemWidth',//侧边导航宽度
        ]),
        // isShowsideBarCollapse() {
        //     return this.sideBarCollapse;
        // }

        /*
        menuList() {
          return this.sideBar;
        },*/

        // setMode() {
        //     // return this.isCollapse ? "vertical" : "horizontal";
        //     return false ? "vertical" : "horizontal";
        // }
    },
    mounted() {
        //  this.sideBarCollapse  = false    取  this.width =220

    },
    methods: {
        // 判断是否要保留tabs
        handleClickMe() {
            if (this.sideBarCollapse) {
                this.$store.commit('menu/OPEN_SIDE_BAR');
            } else {
                this.$store.commit('menu/CLOSE_SIDE_BAR');
            }
            this.sideBarWidth = this.sideBarCollapse ? this.collapseWidth : this.width;
            // // 切换侧边栏的收缩展开状态
            // this.$store.commit('menu/TOGGLE_SIDE_BAR_COLLAPSE');
            // 记录侧边导航的宽度
            this.$store.commit('menu/SET_SIDE_BAR_WIDTH', this.sideBarWidth);
        },

        // 切换侧边栏的收缩展开状态
        toggleSidBar() {
            this.$store.commit('menu/TOGGLE_SIDE_BAR_COLLAPSE');
            // 记录侧边导航的宽度
            this.$store.commit("menu/SET_SIDE_BAR_WIDTH", this.sideBarWidth);
        },

        // handleOpen(key, keyPath) {
        //     this.muenLeftIndex.push(key);
        //     app.addEventListener('click', this.myFunc);
        // },
        // // 关闭menu方法
        // closePopper() {
        //     const elMenu = this.$refs['setMenuRef'];
        //     if (elMenu) {
        //         this.muenLeftIndex.forEach(item => {
        //             elMenu.close(item);
        //         })
        //         //最后清空数组
        //         this.muenLeftIndex = [];
        //         app.removeEventListener('click', this.myFunc)
        //     }

        // },
        // // 绑定事件 判断点击事件 的点击位置 const elMenu = that.$refs['menuSmell'];
        // myFunc(event) {
        //     const idDom = document.getElementById('sidebarMenu');
        //     const e = event || window.event;
        //     if (idDom && !idDom.contains(e.target) && this.muenLeftIndex.length > 0) {
        //         this.closePopper();
        //     }
        // },
    }
}
</script>

<style  lang='scss' >
.menuIndex {
    height: 100%;
    /* min-height: 800px; */
    float: left;
    position: relative;
    /* overflow: hidden; */
    /* overflow-y: auto; */
    background-color: #d9d9d9;
    .menuIndex_scrollbar {
        height: 100%;
        /* overflow-y: auto; */
        .side-bar-scrollbar-wrap {
            overflow: hidden;
            overflow-y: auto;
        }
        /* 菜单收齐时 */
        .side-bar-scrollbar-wrap .el-scrollbar__view {
            .menuUl > .MenuItem .el-submenu__title {
                .el-submenu__icon-arrow.el-icon-arrow-right {
                    right: 5px;
                }
            }
        }
    }
    .side-bar-scrollbar-wrap {
        /* max-height: 94vh; */
    }
    .bgimg {
        width: 20px;
        height: 60px;
    }
    .btnright_r {
        position: absolute;
        width: 18px;
        padding: 20px 8px 20px 1px;
        margin-left: 2px;
        top: 25vh;
        right: -16px;
        z-index: 99;
    }

    .menuUl.el-menu {
        border-right: none;
        margin-top: 6px;
    }
    .menuUl.el-menu--collapse.el-menu > .MenuItem > .el-menu-item {
        line-height: 56px;
        height: 56px;
    }
    /* 展开样式 */
    .el-menu--collapse .el-menu-item i.el-menu-icon,
    .el-menu--collapse .el-submenu .el-submenu__title i.el-menu-icon {
        font-size: 24px;
    }
    div.MenuItem > li.el-menu-item,
    div.MenuItem > li.el-submenu > div.el-submenu__title {
        line-height: 42px;
        height: 42px;
        font-size: 15px;
        padding: 0 0 0 14px !important;
    }
    /* 二级菜单 打开的 */
    div.MenuItem > li.el-submenu > ul.el-menu {
        > .MenuItem > .el-menu-item,
        > .MenuItem > .el-submenu > .el-submenu__title {
            font-size: 13px;
            line-height: 38px;
            height: 38px;
        }
    }
    /* 展开样式结束 */

    .el-icon-arrow-down {
        color: #fff;
        text-indent: 2px;
    }
}
/* 缩放样式 */

.el-menu--vertical > ul.el-menu--popup {
    /* max-height: 555px;
    overflow: hidden;
    overflow-y: auto; */
    border: 1px solid #1877d6;
    > div.MenuItem {
        > li.el-submenu {
            opacity: 1 !important;
        }
        /* 二级菜单样式 */
        > li.el-menu-item {
            height: 40px;
            line-height: 40px;
        }
        > li.is-active.el-menu-item {
            background-color: #1877d6;
            opacity: 1 !important;
            > span {
                color: #fbf300 !important; //#fbf30 0ffff
            }
        }
        > li.is-active.el-submenu > .el-submenu__title {
            background-color: #1877d6;
            opacity: 1 !important;
            > span {
                color: #fbf300 !important;
                /* color: #00ffff !important; */
            }
        }
        /* >li.is-opened >.el-submenu__title>span{
            color:#00ffff !important;
        } */
        > li.el-submenu {
            /* 二级菜单 */
            > div.el-submenu__title {
                height: 34px;
                line-height: 34px;
            }

            /* 三级菜单 */
            > .el-menu--vertical {
                max-height: 480px;
                overflow: auto;
                > ul.el-menu--popup {
                    border: 1px solid #1877d6;
                    > .MenuItem {
                        > li.is-active {
                            background-color: #1877d6;
                            opacity: 1 !important;
                            > span {
                                color: #fbf300 !important;
                                /* color: #00ffff !important; */
                            }
                        }
                        > .el-menu-item {
                            height: 34px;
                            line-height: 34px;
                            opacity: 1 !important;
                        }
                    }
                }
            }
        }
    }
}

.MenuItem > li.el-menu-item {
    font-size: 14px;
}
</style>